<template>
  <div class="app-container">
    <div class="customContainer">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select v-model="formInline.status" style="width:100px">
            <el-option v-for="item in status_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select filterable placeholder="请选择门店" v-model="store_id" style="width:300px">
            <el-option v-for="item in store_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input style="width:300px" v-model="formInline.order_id" placeholder="请输入完整调拨单号或单号末尾数字"
            @keyup.enter.native="searchClick"></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>

      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="调拨单号" prop="order_no"></el-table-column>
        <el-table-column align="center" label="创建时间" prop="create_time"></el-table-column>
        <el-table-column align="center" label="调出店" prop="store_out_name"></el-table-column>
        <el-table-column align="center" label="收货方" prop="store_in_name"></el-table-column>
        <el-table-column align="center" label="调拨状态" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.status|sOrderStatus}}</span>
          </template>          
        </el-table-column>
        <!-- 列表的操作按钮 -->
        <el-table-column align="center" label="操作" width="100">
          <template slot-scope="scope">
            <router-link v-show="scope.row.status=='0'"
              :to="{name:'warehouse/soInfo',params :{id:scope.row.id,routerflag:1}}">
              <el-button type="primary" plain size="mini">审批</el-button>
            </router-link>
            <router-link v-show="scope.row.status!='0'"
              :to="{name:'warehouse/soInfo',params :{id:scope.row.id,routerflag:2}}">
              <el-button type="primary" plain size="mini">详情</el-button>
            </router-link>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage"
        :page-size="20" layout="prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
    </div>
  </div>
</template>
<script>
  import { getStore, getList, getPage } from "@/api/warehouse/allot_check";
  export default {
    data() {
      return {
        listLoading: false,
        status_list: [
          { id: "0", name: "待审核" },
          { id: "1", name: "待发货" },
          { id: "2", name: "待收货" },
          { id: "3", name: "部分收货" },
          { id: "5", name: "收货完成" },
          { id: "10", name: "已打回" },
          { id: "6", name: "已关闭" }
        ],
        store_list: [],
        store_id: "",
        formInline: {
          status: "0",
          order_id: "",
          store_id: "",
          house_id: "",
        },
        list: null,
        totalDataNumber: 1,
        currentPage: 1,
      };
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
        if (!vm.list) {
          vm.getHouse();
        }
        if (vm.$route.params.routerflag == 1) {
          vm.handleCurrentChange(vm.currentPage);
        }
      });
    },
    methods: {
      getHouse() {
        this.listLoading = true;
        getStore({ look_del: 0, category_id: 176 }).then(res => {
            this.store_list = res;
            let data = res.filter(val => val.id == this.$store.getters.optionId)
            if(data.length>0){
                this.store_id = data[0].id;
            }else{
                this.store_id = this.store_list[0].id;
            }
            this.searchClick();
        });
      },
      searchClick() {
        this.fetchData();
      },
      // 列表获取
      fetchData() {
        this.listLoading = true;
        this.currentPage = 1;
        this.formInline.store_id=this.store_id;
        this.list = [];
        getPage(this.formInline)
          .then(response => {
            this.totalDataNumber = response.message.page * 20;
            getList(this.formInline).then(res => {
              if (res.code == 1) {
                this.list = res.message;
              }
              this.listLoading = false;
            });
          })
          .catch(res => {
            this.listLoading = false;
          });
      },
      handleCurrentChange(val) {
        this.listLoading = true;
        this.list = [];
        getList(this.formInline, val).then(response => {
          this.list = response.message;
          this.listLoading = false;
        });
      }
    }
  };
</script>